<template>
  <MyLayout>
    <template #left>
      <div class="left">
        <a-input
          v-model:value="filterText"
          class="filterSearch"
          allowClear
          :maxlength="20"
          @change="onChangeFilter"
          placeholder="输入关键字进行查找"
        />
        <a-tree
          :tree-data="treeDataAll"
          style="margin-top: 20px"
          :autoExpandParent="true"
          blockNode
          defaultExpandAll
          show-icon
          @select="onSelectTree"
          :fieldNames="{ title: 'name', key: 'id' }"
        >
          <template #icon="{ id }">
            <template v-if="id === '1'">
              <appstore-outlined />
            </template>
            <template v-else="jdhid">
              <star-filled v-if="activeContingentId === id" />
              <star-outlined v-else />
            </template>
          </template>
        </a-tree>
      </div>
    </template>
    <template #right>
      <MyPeopleTable
        v-if="activeContingentId"
        :contingentId="activeContingentId"
      />

      <MyTreeDataTable :contingentList="contingentTreeData" v-else />
    </template>
  </MyLayout>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getContingentTree } from "@/api/contingent";
import {
  StarOutlined,
  AppstoreOutlined,
  StarFilled,
} from "@ant-design/icons-vue";
import { filter } from "lodash";
import MyLayout from "@/components/layout/index.vue";
import MyPeopleTable from "./components/peopleTable.vue";
import MyTreeDataTable from "./components/treeDataTable.vue";
onMounted(() => {
  getContingentTree().then((res: any) => {
    contingentTreeData.value = res.data;
    console.log(res);
    treeDataAll.value[0].children = res.data;
    console.log(treeDataAll.value[0]);
  });
});
// //
// const createParent = ref("机构设置");
const activeContingentId = ref("");
// // 机构的表格数据
// const tableData = ref<MechanismTreeData[]>([]);
// // 是否显示人员表格 如果为false显示机构表格数据，如果为true显示人员表格数据
// const isShowPeople = ref(false);
// 当点击某个树形节点时，将里面的子数据传递给data
const onSelectTree = (_: any, e: any) => {
  if (e.node.id === "1") {
    activeContingentId.value = "";
  } else {
    activeContingentId.value = e.node.id;
  }
};
/**
 * 代表团树形结构功能
 * contingentTreeData 代表团的树形结构数据
 * filterText 过滤文本
 * onChangeFilter 过滤函数
 * treeDataAll 用于页面展示和筛选的树形数据
 */
// 代表团的树形结构数据
const contingentTreeData = ref([]);
const filterText = ref("");
//  * onChangeFilter 过滤函数 根据filterText去检查是否包含这个字符过滤数据并赋值
const onChangeFilter = () => {
  if (filterText.value.trim() === "") {
    treeDataAll.value[0].children = contingentTreeData.value;
  }
  treeDataAll.value[0].children = filter(
    treeDataAll.value[0].children,
    (item: any) => {
      return item.name.includes(filterText.value);
    }
  );
};
// * 用于树形结构的展示
const treeDataAll = ref<{ name: string; id: string; children: any }[]>([
  {
    name: "机构设置",
    id: "1",
    children: [],
  },
]);
</script>

<style scoped lang="less">
:deep(svg) {
  vertical-align: middle;
}
.left {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  /* 设置滚动条的样式 */
  &::-webkit-scrollbar {
    width: 6px;
  }
  /* 滚动槽 */
  &::-webkit-scrollbar-track {
    border-radius: 10px;
  }
  /* 滚动条滑块 */
}
.filterSearch {
  width: 100%;
}
</style>
